import './index.less'
import pubsub from 'pubsub-js'
import {timer} from '@/utils'
import {history} from 'umi'

function ReplyItem(props) {
  const handleClick = (id) => {
    pubsub.publish('reply', id)
  }

  return (
    <div className='reply-item' onClick={() => {
      handleClick(props?.reply?.id)
    }}>
      <div className='reply-header'>
        <img onClick={(e) => {
          e.stopPropagation()
          history.push({pathname: '/user/userDetail', query: {id: props?.reply?.uid}})
        }} src={props?.reply?.user?.userInfo?.avatar || require('@/assets/user.png')}/>
        <span className='reply-nickname'>{props?.reply?.user?.nickName}</span>
      </div>
      <div className='reply-content'>{props?.reply?.content}</div>
      <div className='reply-createdAt'>{timer(props?.reply?.createdAt)}</div>
      {props?.reply?.ToReply?.length ? props?.reply?.ToReply.map(item => (
        <div className='toReply' key={item.id}>
          <div className='toReply-header'>
            <img onClick={(e) => {
              e.stopPropagation()
              history.push({pathname: '/user/userDetail', query: {id: item?.uid}})
            }} src={item.user?.userInfo?.avatar || require('@/assets/user.png')}/>
            <span className='toReply-nickName'>{item?.user?.nickName}</span>
            <span>回复了</span>
            <span className='toReply-content'>{item?.content}</span>
          </div>
          <span className='toReply-createdAt'>{timer(item.createdAt)}</span>
        </div>
      )) : ''}
    </div>
  )
}

export default ReplyItem
